<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

    <title>修改登录密码</title>
    <link rel="stylesheet" href="../css/base.css"/>
    <style>
        /*头部css*/
        header{
            height: 1.3rem;
            padding-top: 0.4rem;
            line-height: 0.93rem;
            width: 100%;
            background-color: #fff;
            position:fixed;
            z-index:11;

        }
        header h3{
            text-align: center;
            color:#686868;
            font-size: 0.36rem;
        }
        header  i,header em{
            background: url("../img/b_left_03.png") no-repeat center;
            height: 100%;
            line-height: 100%;
            width: 0.6rem;
            position: absolute;
            -webkit-background-size: 100%;
            background-size: 100%;
        }
        header  i{
            left: 2%;
            top: 1%;
        }
        .main{
            padding-top: 1.8rem;
        }

        .confirm{
            width: 90%;
            padding:0.3rem 0;
            background-color: #72462B;
            color:#fff;
            position: relative;
            left: 5%;
            border-radius: 5px;
            font-size: 0.36rem;
        }
        .password_change{
            width:100%;
            color:#333;
        }
        .old_password,.new_password{
            height: 1rem;
            line-height: 1rem;
            font-size: 0.28rem;
            background-color: #eee;
            padding:0rem 0.5rem ;
            position: relative;

        }

        .old_password input,.new_password input{
            display: inline-block;
            width: 82%;
            height: 80%;
            background-color:#eee;
        }
        .password_change p{
            color:#999;
            height: 0.98rem;
            line-height: 0.98rem;
            padding-left: 0.5rem;
        }
/*小眼睛*/
        .old_password i,.new_password i{
            position: absolute;
            right: 8%;
            top: 0;
            background: url("../img/eyes.png") no-repeat center;
            -webkit-background-size: 100%;
            background-size: 100%;
            height: 100%;
            width: 0.6rem;
        }
    </style>
</head>
<body>

<div class="layer change_login_password">
    <header class="clearfix">
        <i onclick="back()" ></i>
        <h3>修改密码</h3>
    </header>
    <div class="main">
        <div class="password_change clearfix ">
            <form action="" class="clearfix">
                <div class="old_password">
                    旧密码：<input type="password" class="o_password"/> <i class="eye"></i>
                </div>
                <p>请注意区分大小写</p>
                <div class="new_password">
                    新密码：<input type="password" class="n_password" /> <i class="eye1"></i>
                </div>
                <p>6-12位，至少含数字/字母/字符</p>
            </form>
        </div>
        <button class="confirm">确定</button>
    </div>
</div>
<script src="../js/x_rem.js"></script>
<script src="../js/base.js"></script>
<script src="../js/jquery.js"></script>
<script>
    $(function(){
            //旧密码校验  发送ajax
        var regu = "^[0-9a-zA-Z]{6,12}$";
        var re = new RegExp(regu);
        var parm={};
        //校验密码
        $(".confirm").click(function(){
            //发送ajax
            var password= $(".n_password").val();
            parm.password=password;
            console.log(JSON.stringify(parm));
            if (re.test(password)) {
                $.ajax({
                    xhrFields: {
                        withCredentials: true
                    },
                    type:"post",
                    // contentType:'application/json;charset=UTF-8',
                    dataType: 'json',
                    url:baseUrl+"/student/updatePassword",
                    data: parm,
                    success: function (data) {
                        console.log(data);
                        if(data.code=="success"){
                            window.location.href="login.html";
                        }
                    }
                })
            }
            else{
                alert("密码格式不正确");
                $("input").val("");
                return false;
            }
        });
        //验证密码不能为空
        function isNotBlank(data) {
            return (data == "" || typeof(data)  == "undefined"|| data == null ) ? false : true;
        }
        //点击小眼睛 改变input的状态
        function eyes( flag,className){
            if(flag){
                $(className+">input[type='password']").attr("type","text");
                $(this).css("background-image","url(../img/close_eyes.png)");
                flag=false;
            }else{
                $(className+">input[type='text']").attr("type","password");
                $(this).css("background-image","url(../img/eyes.png)");
                flag=true;
            }
        }
        //旧密码的小眼睛
        var flag=true;
        $(".eye").click(function(){
            if(flag){
                $(".old_password>input[type='password']").attr("type","text");
                $(this).css("background-image","url(../img/close_eyes.png)");
                flag=false;
            }else{
                $(".old_password>input[type='text']").attr("type","password");
                $(this).css("background-image","url(../img/eyes.png)");
                flag=true;
            }
        });
        //新密码的小眼睛
        var newflag=true;
        $(".eye1").click(function(){
            if(flag){
                $(".new_password>input[type='password']").attr("type","text");
                $(this).css("background-image","url(../img/close_eyes.png)");
                flag=false;
            }else{
                $(".new_password>input[type='text']").attr("type","password");
                $(this).css("background-image","url(../img/eyes.png)");
                flag=true;
            }
        })
    })
</script>
</body>
</html>